當我們使用 Vue Cli 去建立專案後，src 目錄下會自動新增一個 App.vue 檔案

而此 app.vue 檔案由三部分組成：

• <template>: 元件的 HTML 模板
• <script>: 主要 JavaScript / TypeScript 程式
• <style>: CSS 樣式

而 Vue.js 就是透過此三個區塊來表示單一元件，因此也被稱為單一元件檔，SFC 中一個檔案也只代表一個元件，可以當我們在組織程式碼結構時，清楚地看出整個專案的架構與元件的分割關係。

template

在 SFC 裡的 template 區塊，主要放置的是當前元件的 HTML 模板，與元件的 template 選項相同，可以直接在裡面使用 Vue 的指令及語法，如：{{ }}、v-if 及 v-show。

script

script 區塊內放置這個元件的主要程式碼內容，可以透過 ES Module 的 import 語法將其他 SFC 檔案引入成為子元件，如是元件實體物件本身的程式碼的話，就必須透過 export default 的方式輸出。

style

此區塊是用來放置 CSS 的各種樣式規則，而一個 SFC 裡面可以包含多個 style 區塊

那我們今天對於 SFC 單一元件檔的介紹就到這裡結束了